import Vue from 'vue'
import Toast from './Toast.vue'


// Vue.extend 返回的其实是一个 VueComponent 构造函数
const ToastConstructor = Vue.extend(Toast)

// console.log('ToastConstructor', ToastConstructor)

function showToast(text, duration = 0, word) {
  // 创建组件
  const ToastDOM = new ToastConstructor({
    // 这里面的配置就是组件的option配置
    el: document.createElement('div'),
    props: {
      word: String
    },
    data() {
      return {
        text,
        show: true
      }
    },
    mounted() {
      console.log('mounted', this)
    },
    methods: {
      close() {
        this.show = false
      }
    }
  })

  // 设置属性值
  ToastDOM.word = word

  if (duration !== 0) {
    // 延迟多少秒后关闭
    setTimeout(() => {
      ToastDOM.show = false
    }, duration);
  }

  // ToastDOM 为 VueComponent 组件实例对象
  console.log('ToastDOM', ToastDOM)

  // 将ToastDOM 的真实DOM append到body上
  document.body.appendChild(ToastDOM.$el)

  // 返回组件实例， 可以让使用者自动控制一些逻辑， 目前提供一个 close 方法
  return ToastDOM
}

function toastRegister() {
  // 往Vue的原型链上添加自定义方法， 通过 this.$toast 使用
  Vue.prototype.$toast = showToast
}

export default toastRegister